<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <uni-forms ref="formRef" :model-value="formData" :rules="rules">
    <uni-forms-item name="indwellingTime">
      <view class="cu-form-group">
        <view class="title">导管留置天数</view>
        <input v-model="formData.indwellingTime" placeholder="请输入导管留置天数" name="input"/>
        <view>天</view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="endIntact">
      <view class="cu-form-group">
        <view class="title">导管末端是否完整</view>
        <view>
          <radio-group class="block" @change="endIntactChange">
            <label>
              <radio class='green radio' :class="formData.endIntact==='否'?'checked':''"
                     :checked="formData.endIntact==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.endIntact==='是'?'checked':''"
                     :checked="formData.endIntact==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="processSmooth">
      <view class="cu-form-group">
        <view class="title">是否顺利</view>
        <view>
          <radio-group class="block" @change="processSmoothChange">
            <label>
              <radio class='green radio' :class="formData.processSmooth==='否'?'checked':''"
                     :checked="formData.processSmooth==='否'" value="否"></radio>
              否
            </label>
            <label>
              <radio class='red margin-left-sm' :class="formData.processSmooth==='是'?'checked':''"
                     :checked="formData.processSmooth==='是'" value="是"></radio>
              是
            </label>
          </radio-group>
        </view>
      </view>
    </uni-forms-item>
    <uni-forms-item name="images">
      <view class="cu-form-group">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in formData.images" :key="index" @tap="viewImage"
                :data-url="prefix+formData.images[index]">
            <MrImage :src="formData.images[index]"></MrImage>s
            <view class="cu-tag bg-red" @tap.stop="delImage" :data-index="index">
              <text class='cuIcon-close'></text>
            </view>
          </view>
          <view class="solids" @tap="chooseImage" v-if="formData.images.length<4">
            <text class='cuIcon-cameraadd'></text>
          </view>
          <view v-if="formData.images.length===0" style="width: 65vw">
            <text>上传图片（检查单、CT、就诊过程图）</text>
          </view>
        </view>
      </view>
    </uni-forms-item>
  </uni-forms>
  <view class="flex flex-direction margin-bottom-xl">
    <button class="cu-btn bg-blue lg" @click="handle">提交</button>
  </view>
</template>

<script setup lang="ts">
import {defineEmits, ref} from "vue";
import {uploadFile,imagePathPrefix} from '/settings'
import MrImage from "@/components/common/MrImage.vue";
import MrCustom from "@/components/common/MrCustom.vue";
const url = uploadFile.url
const name =uploadFile.name
const prefix =imagePathPrefix
const emits = defineEmits(['onHandle'])
const formRef = ref()
const formData = ref({
  indwellingTime: '',
  endIntact: '',
  processSmooth: '',
  images:[],
})
const handle = () => {
  console.log(formData.value)
  uni.showModal({
    title: '提示',
    content: '确认提交？',
    success: function (res) {
      if (res.confirm) {
        emits('onHandle',formData.value)
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

const viewImage = (e: any) => {
  let tmp =JSON.parse(JSON.stringify(formData.value.images))
  Object.keys(tmp).forEach(key=>{
    tmp[key]= 'http://127.0.0.1:82/chat'+tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: e.currentTarget.dataset.url
  });
}
const delImage = (e: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这张图片吗？',
    cancelText: '取消',
    confirmText: '确认',
    success: res => {
      if (res.confirm) {
        formData.value.images.splice(e.currentTarget.dataset.index, 1)
      }
    }
  })
}
const chooseImage = () => {
  uni.chooseImage({
    count: 4, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: (res) => {
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePaths[0],
        name: name,
        success: (uploadFileRes) => {
          let tmp = JSON.parse(uploadFileRes.data).data
          if (formData.value.images.length != 0) {
            formData.value.images = formData.value.images.concat(tmp)
          } else {
            formData.value.images = [tmp]
          }
        }
      });
    }
  });
}


const endIntactChange = (e: any) => {
  formData.value.endIntact = e.detail.value
}
const processSmoothChange = (e: any) => {
  formData.value.processSmooth = e.detail.value
}
const rules = ref()


</script>

<style scoped>

</style>